<template>
  <div>
    <Headline
      :headline1="$t('m.FaceRecognition') + '  /  '"
      :headline2="$t('m.TimePlan')"
    />
    <a-card>
      <a-input-search
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          style="width: 200px; margin-right: 20px"
          enter-button
          v-model="forminitial.key"
          @search="onSearch"
      />
      <a-button
        type="primary"
        @click="add"
        icon="plus"
        style="margin-right: 10px"
        v-if="isTrue('face:time:add')"
        >{{ $t("m.Add") }}</a-button
      >
      <a-button
        type="primary"
        @click="edit"
        icon="edit"
        style="margin-right: 10px"
        v-if="isTrue('face:time:del')"
        >{{ $t("m.Modification") }}</a-button
      >
      <a-button
        type="danger"
        v-if="isTrue('face:time:add')"
        @click="del"
        icon="delete"
        >{{ $t("m.Delete") }}</a-button
      >
      <a-table
        style="margin-top: 20px"
        :columns="columns"
        :data-source="data"
        :rowKey="(record, i) => record.id"
        bordered
        size="middle"
        :pagination="false"
        :row-selection="{
          onChange: onSelectChange,
          selectedRowKeys: selectedRowKeysList,
        }"
      />
      <a-pagination
        style="margin-top: 10px"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="Pages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="onShowSizeChange"
        class="pages"
      />
    </a-card>
    <a-modal
      :title="
        this.flag == true ? $t('m.Thenewperiodoftime') : $t('m.ModifyTheTime')
      "
      :visible="visible"
      @cancel="handleCancel"
      width="800px"
      @ok="Ok"
      :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
    >
      <a-form-model
        ref="ruleForm"
        :model="timeData"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-row>
          <a-form :form="form">
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Slotnumber')" prop="timeIndex">
                <a-input-number
                  v-decorator="[
                    'timeIndex',
                    { rules: [{ required: true, message: '请输入时段编号' }] },
                  ]"
                  v-model="paramsValue.timeIndex"
                  style="width: 130px"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.SlotName')" prop="timeName">
                <a-input
                  v-decorator="[
                    'timeName',
                    { rules: [{ required: true, message: '请输入时段名称' }] },
                  ]"
                  v-model="paramsValue.timeName"
                  style="width: 130px"
                />
              </a-form-model-item>
            </a-col>
            <h3>{{ $t("m.Passageperiod1") }}</h3>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Starts')" prop="startTime" >
                <a-time-picker
                v-decorator="[
                    'startTime',
                    { rules: [{ required: true, message: '请输入起始时间' }] },
                  ]"
                  @change="startChange1"
                  v-model="timeData.startTime"
                  :default-value="timeData.startTime"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Ends')" prop="endTime">
                <a-time-picker
                v-decorator="[
                    'endTime',
                    { rules: [{ required: true, message: '请输入结束时间' }] },
                  ]"
                  @change="endChange1"
                  v-model="timeData.endTime"
                  :default-value="timeData.endTime"
                />
              </a-form-model-item>
            </a-col>
            <h3>{{ $t("m.Passageperiod2") }}</h3>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Starts')" prop="startTimeExt1">
                <a-time-picker
                  @change="startChange2"
                  v-model="timeData.startTimeExt1"
                  :default-value="timeData.startTimeExt1"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Ends')" prop="endTimeExt1">
                <a-time-picker
                  @change="endChange2"
                  v-model="timeData.endTimeExt1"
                  :default-value="timeData.endTimeExt1"
                />
              </a-form-model-item>
            </a-col>
            <h3>{{ $t("m.Passageperiod3") }}</h3>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Starts')" prop="startTimeExt2">
                <a-time-picker
                  @change="startChange3"
                  v-model="timeData.startTimeExt2"
                  :default-value="timeData.startTimeExt2"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Ends')" prop="endTimeExt2">
                <a-time-picker
                  @change="endChange3"
                  v-model="timeData.endTimeExt2"
                  :default-value="timeData.endTimeExt2"
                />
              </a-form-model-item>
            </a-col>
            <h3>{{ $t("m.Passageperiod4") }}</h3>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Starts')" prop="startTimeExt3">
                <a-time-picker
                  @change="startChange4"
                  v-model="timeData.startTimeExt3"
                  :default-value="timeData.startTimeExt3"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Ends')" prop="endTimeExt3">
                <a-time-picker
                  @change="endChange4"
                  v-model="timeData.endTimeExt3"
                  :default-value="timeData.endTimeExt3"
                />
              </a-form-model-item>
            </a-col>
            <h3>{{ $t("m.Passageperiod5") }}</h3>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Starts')" prop="startTimeExt4">
                <a-time-picker
                  @change="startChange5"
                  v-model="timeData.startTimeExt4"
                  :default-value="timeData.startTimeExt4"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Ends')" prop="endTimeExt4">
                <a-time-picker
                  @change="endChange5"
                  v-model="timeData.endTimeExt4"
                  :default-value="timeData.endTimeExt4"
                />
              </a-form-model-item>
            </a-col>
            <h3>{{ $t("m.Passageperiod6") }}</h3>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Starts')" prop="startTimeExt5">
                <a-time-picker
                  @change="startChange6"
                  v-model="timeData.startTimeExt5"
                  :default-value="timeData.startTimeExt5"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('m.Ends')" prop="endTimeExt5">
                <a-time-picker
                  @change="endChange6"
                  v-model="timeData.endTimeExt5"
                  :default-value="timeData.endTimeExt5"
                />
              </a-form-model-item>
            </a-col>
          </a-form>
        </a-row>
      </a-form-model>
    </a-modal>
    <Delete ref="delshow" @confirm="delOk" :dalete="delDataList"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import { TimeInterval } from "@/assets/js/timeInterval";
import {
  getTimeSchemeList,
  saveTimeScheme,
  deleteTimeScheme,
} from "@/api/faceRecognition";
import { Setperms } from "@/assets/js/setperms";
export default {
  name: "TimeScheme",
  components: { Headline, Delete },
  data() {
    return {
      checkNick: false,
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      flag: true,
      selectedRowKeysList: [],
      data: [],
      columns: [
        {
          title: this.$t("m.Slotnumber"),
          dataIndex: "timeIndex",
        },
        {
          title: this.$t("m.SlotName"),
          dataIndex: "timeName",
        },
        {
          title: this.$t("m.timezone1"),
          children: [
            {
              title: this.$t("m.Start"),
              dataIndex: "startTime",
            },
            {
              title: this.$t("m.End"),
              dataIndex: "endTime",
            },
          ],
        },
        {
          title: this.$t("m.timezone2"),
          children: [
            {
              title: this.$t("m.Start"),
              dataIndex: "startTimeExt1",
            },
            {
              title: this.$t("m.End"),
              dataIndex: "endTimeExt1",
            },
          ],
        },
        {
          title: this.$t("m.timezone3"),
          children: [
            {
              title: this.$t("m.Start"),
              dataIndex: "startTimeExt2",
            },
            {
              title: this.$t("m.End"),
              dataIndex: "endTimeExt12",
            },
          ],
        },
        {
          title: this.$t("m.timezone4"),
          children: [
            {
              title: this.$t("m.Start"),
              dataIndex: "startTimeExt3",
            },
            {
              title: this.$t("m.End"),
              dataIndex: "endTimeExt13",
            },
          ],
        },
        {
          title: this.$t("m.timezone5"),
          children: [
            {
              title: this.$t("m.Start"),
              dataIndex: "startTimeExt4",
            },
            {
              title: this.$t("m.End"),
              dataIndex: "endTimeExt4",
            },
          ],
        },
        {
          title: this.$t("m.timezone6"),
          children: [
            {
              title: this.$t("m.Start"),
              dataIndex: "startTimeExt5",
            },
            {
              title: this.$t("m.End"),
              dataIndex: "endTimeExt5",
            },
          ],
        },
      ],
      forminitial: {
        page: 1,
        start: 0,
        limit: 10,
        key: "",
      },
      total: 0,
      visible: false,
      // form: this.$form.createForm(this, { name: "coordinated" }),
      delDataList: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "warning",
        text: this.$t("m.AreYouSureToDeleteData"),
      },
      timeData: {
        timeIndex: "",
        timeName: "",
        startTime: null,
        endTime: null,
        startTimeExt1: null,
        endTimeExt1: null,
        startTimeExt2: null,
        endTimeExt2: null,
        startTimeExt3: null,
        endTimeExt3: null,
        startTimeExt4: null,
        endTimeExt4: null,
        startTimeExt5: null,
        endTimeExt5: null,
      },
      rules: {
        timeIndex: [
          {
            required: false,
            message: "Please input",
            trigger: "blur",
          },
        ],
        timeName: [
          {
            required: false,
            message: "Please input",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: false,
            message: "Please input",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: false,
            message: "Please input",
            trigger: "blur",
          },
        ],
      },
      paramsValue: {
        timeIndex: "",
        timeName: "",
        startTime: "",
        endTime: "",
        startTimeExt1: "",
        endTimeExt1: "",
        startTimeExt2: "",
        endTimeExt2: "",
        startTimeExt3: "",
        endTimeExt3: "",
        startTimeExt4: "",
        endTimeExt4: "",
        startTimeExt5: "",
        endTimeExt5: "",
        // id:'',
      },
      paramsId: "",
      demo: {
        startTime: "",
        endTime: "",
      },
    };
  },
  created() {
    this.getTimeScheme();
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    endChange1(e) {
      this.paramsValue.endTime = this.$moment(e._d).format("HH:mm:ss");
    },
    endChange2(e) {
      this.paramsValue.endTimeExt1 = this.$moment(e._d).format("HH:mm:ss");
    },
    endChange3(e) {
      this.paramsValue.endTimeExt2 = this.$moment(e._d).format("HH:mm:ss");
    },
    endChange4(e) {
      this.paramsValue.endTimeExt3 = this.$moment(e._d).format("HH:mm:ss");
    },
    endChange5(e) {
      this.paramsValue.endTimeExt4 = this.$moment(e._d).format("HH:mm:ss");
    },
    endChange6(e) {
      this.paramsValue.endTimeExt5 = this.$moment(e._d).format("HH:mm:ss");
    },

    startChange1(e) {
      this.paramsValue.startTime = this.$moment(e._d).format("HH:mm:ss");
      console.log(this.paramsValue);
    },
    startChange2(e) {
      console.log(e);
      this.paramsValue.startTimeExt1 = this.$moment(e._d).format("HH:mm:ss");
    },
    startChange3(e) {
      console.log(e);
      this.paramsValue.startTimeExt2 = this.$moment(e._d).format("HH:mm:ss");
    },
    startChange4(e) {
      console.log(e);
      this.paramsValue.startTimeExt3 = this.$moment(e._d).format("HH:mm:ss");
    },
    startChange5(e) {
      console.log(e);
      this.paramsValue.startTimeExt4 = this.$moment(e._d).format("HH:mm:ss");
    },
    startChange6(e) {
      console.log(e);
      this.paramsValue.startTimeExt5 = this.$moment(e._d).format("HH:mm:ss");
    },
    Ok() {
      this.form.validateFields((err) => {
        if (!err) {
          console.log("没有通过校验");
          return (this.visible = true);
        } else {

          let statuFlag = TimeInterval(this.paramsValue)
          if(statuFlag == true) {
            console.log("通过校验");
              if (this.flag == true) {
                console.log(this.paramsValue);
                saveTimeScheme(this.paramsValue)
                  .then((res) => {
                    if (res.data.success == true) {
                      this.$message.success(res.data.msg);
                      this.getTimeScheme();
                    } else {
                      this.$message.warning(res.data.msg);
                    }
                    console.log(res);
                  })
                  .catch((err) => {
                    this.$message.error("操作失败");
                    console.log(err);
                  });
              }
              if (this.flag == false) {
                let formation = JSON.parse(JSON.stringify(this.paramsValue));
                formation.id = this.paramsId;
                console.log(formation);
                saveTimeScheme(formation)
                  .then((res) => {
                    if (res.data.success == true) {
                      this.$message.success(res.data.msg);
                      this.getTimeScheme();
                    } else {
                      this.$message.warning(res.data.msg);
                    }
                    console.log(res);
                  })
                  .catch((err) => {
                    this.$message.error("操作失败");
                    console.log(err);
                  });
              }
              this.$refs.ruleForm.resetFields();
            this.timeData.timeIndex = null
            this.timeData.timeName = null
            this.timeData.startTime = null
            this.timeData.endTime = null
            this.timeData.startTimeExt1 = null
            this.timeData.endTimeExt1 = null
            this.timeData.startTimeExt2 = null
            this.timeData.endTimeExt2 = null
            this.timeData.startTimeExt3 = null
            this.timeData.endTimeExt3 = null
            this.timeData.startTimeExt4 = null
            this.timeData.endTimeExt4 = null
            this.timeData.startTimeExt5 = null
            this.timeData.endTimeExt5 = null
            this.visible = false;
          }




              // console.log(this.timeData);
            // } else {
            //   console.log('error'+vaild)
            // }

      //     });
        }
      });

      // this.$refs.ruleForm.validate
    },
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    onShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.getTimeScheme();
    },
    Pages(page, pageSize) {
      this.forminitial.limit = pageSize;
      this.forminitial.page = page;
      this.forminitial.start = (page - 1) * pageSize;
      this.getTimeScheme();
    },
    delOk() {
      deleteTimeScheme({ ids: this.selectedRowKeysList.join(",") })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this.getTimeScheme();
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.selectedRowKeysList = [];
      this.$refs.delshow.visible = false;
    },
    onSelectChange(e) {
      this.selectedRowKeysList = e;
      console.log(this.selectedRowKeysList);
    },
    edit() {
      setTimeout(() => {
        this.form.setFieldsValue({
          timeIndex:this.data[0].timeIndex,
          timeName:this.data[0].timeName,
        })
      }, 200);
      setTimeout(() => {
        this.form.setFieldsValue({
          startTime:this.data[0].startTime.format("HH:mm:ss"),
          endTiem:this.data[0].endTiem.format("HH:mm:ss"),
        })
      }, 200);
      this.flag = false;
      // console.log(this.selectedRowKeysList.length);
      // console.log(this.selectedRowKeysList.startTime);
      if (this.selectedRowKeysList.length <= 0)
        return this.$message.warning("请选择时段方案");
      if (this.selectedRowKeysList.length > 1)
        return this.$message.warning("时段方案只能选择一条");

      this.visible = true;
      let editItem = this.data.filter((item) => {
        return item.id == this.selectedRowKeysList[0];
      });
      console.log(editItem[0]);
      this.paramsId = editItem[0].id;
      this.timeData.timeIndex = editItem[0].timeIndex;
      this.paramsValue.timeIndex = editItem[0].timeIndex;
      this.timeData.timeName = editItem[0].timeName;
      this.paramsValue.timeName = editItem[0].timeName;
      console.log(this.paramsValue);
      if (editItem[0].startTime) {
        this.timeData.startTime = this.$moment(
          editItem[0].startTime,
          "HH:mm:ss"
        );
        this.paramsValue.startTime = editItem[0].startTime;
      }
      if (editItem[0].endTime) {
        this.timeData.endTime = this.$moment(editItem[0].endTime, "HH:mm:ss");
        this.paramsValue.endTime = editItem[0].endTime;
      }
      if (editItem[0].startTimeExt1) {
        this.timeData.startTimeExt1 = this.$moment(
          editItem[0].startTimeExt1,
          "HH:mm:ss"
        );
        this.paramsValue.startTimeExt1 = editItem[0].startTimeExt1;
      }
      if (editItem[0].endTimeExt1) {
        this.timeData.endTimeExt1 = this.$moment(
          editItem[0].endTimeExt1,
          "HH:mm:ss"
        );
        this.paramsValue.endTimeExt1 = editItem[0].endTimeExt1;
      }
      if (editItem[0].startTimeExt2) {
        this.timeData.startTimeExt2 = this.$moment(
          editItem[0].startTimeExt2,
          "HH:mm:ss"
        );
        this.paramsValue.startTimeExt2 = editItem[0].startTimeExt2;
      }
      if (editItem[0].endTimeExt2) {
        this.timeData.endTimeExt2 = this.$moment(
          editItem[0].endTimeExt2,
          "HH:mm:ss"
        );
        this.paramsValue.endTimeExt2 = editItem[0].endTimeExt2;
      }
      if (editItem[0].startTimeExt3) {
        this.timeData.startTimeExt3 = this.$moment(
          editItem[0].startTimeExt3,
          "HH:mm:ss"
        );
        this.paramsValue.startTimeExt3 = editItem[0].startTimeExt3;
      }
      if (editItem[0].endTimeExt3) {
        this.timeData.endTimeExt3 = this.$moment(
          editItem[0].endTimeExt3,
          "HH:mm:ss"
        );
        this.paramsValue.endTimeExt3 = editItem[0].endTimeExt3;
      }
      if (editItem[0].startTimeExt4) {
        this.timeData.startTimeExt4 = this.$moment(
          editItem[0].startTimeExt4,
          "HH:mm:ss"
        );
        this.paramsValue.startTimeExt4 = editItem[0].startTimeExt4;
      }
      if (editItem[0].endTimeExt4) {
        this.timeData.endTimeExt4 = this.$moment(
          editItem[0].endTimeExt4,
          "HH:mm:ss"
        );
        this.paramsValue.endTimeExt4 = editItem[0].endTimeExt4;
      }
      if (editItem[0].startTimeExt5) {
        this.timeData.startTimeExt5 = this.$moment(
          editItem[0].startTimeExt5,
          "HH:mm:ss"
        );
        this.paramsValue.startTimeExt5 = editItem[0].startTimeExt5;
      }
      if (editItem[0].endTimeExt5) {
        this.timeData.endTimeExt5 = this.$moment(
          editItem[0].endTimeExt5,
          "HH:mm:ss"
        );
        this.paramsValue.endTimeExt5 = editItem[0].endTimeExt5;
      }

      console.log(editItem[0]);
    },
    del() {
      if (this.selectedRowKeysList.length <= 0)
        return this.$message.warning("清选择时段方案");
      this.$refs.delshow.visible = true;
    },
    handleCancel() {
      this.form.resetFields();
      this.visible = false;
      this.paramsValue.timeIndex = "";
      this.paramsValue.timeName = "";
      this.$refs.ruleForm.resetFields();
      this.timeData.timeIndex = "";
      this.timeData.timeName = "";
      this.timeData.startTime = null;
      this.timeData.endTime = null;
      this.timeData.startTimeExt1 = null;
      this.timeData.endTimeExt1 = null;
      this.timeData.startTimeExt2 = null;
      this.timeData.endTimeExt2 = null;
      this.timeData.startTimeExt3 = null;
      this.timeData.endTimeExt3 = null;
      this.timeData.startTimeExt4 = null;
      this.timeData.endTimeExt4 = null;
      this.timeData.startTimeExt5 = null;
      this.timeData.endTimeExt5 = null;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let paramsValue = {};
          paramsValue.timeIndex = values.timeIndex;
          paramsValue.timeName = values.timeName;
          // TimeInterval(values,paramsValue)
          // 不能小于时段一的结束时间
          if (TimeInterval(values, paramsValue) == false) return;
          saveTimeScheme(paramsValue)
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success(res.data.msg);
                this.getTimeScheme();
              } else {
                this.$message.warning(res.data.msg);
              }
              console.log(res);
            })
            .catch((err) => {
              this.$message.error("操作失败");
              console.log(err);
            });
          this.form.resetFields();
          this.visible = false;
        }
      });
    },
    add() {
      this.paramsValue.timeIndex = null;
      this.paramsValue.timeName = null;
      this.paramsValue.endTime = null;
      this.paramsValue.startTime = null;
      this.visible = true;
      this.flag = true;
      // this.paramsValue.id = ''
    },
    getTimeScheme() {
      getTimeSchemeList({ params: this.forminitial })
        .then((res) => {
          this.total = res.data.total;
          this.data = res.data.data;
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onSearch() {
      this.getTimeScheme();
    },
  },
};
</script>

<style>
</style>
